import React, { Component } from 'react'
import { Image, Table } from 'antd'

const columns = [
    {
        title: '学号',
        dataIndex: 'stu_id'
    },
    {
        title: '姓名',
        dataIndex: 'name'
    },
    {
        title: '状态',
        dataIndex: 'status'
    },
    {
        title: '时间',
        dataIndex: 'time'
    },
    {
        title: '验证图',
        dataIndex: 'verifyImg',
        render: (text) => {
            return <Image src={text} alt='暂无验证身份图' style={{ width: '100px', height: '100px' }} />
        }
    },
    {
        title: '操作',
        dataIndex: 'operation',
        render: (_, record) => {
            return record.verified ? <div>
                <a>判处作弊</a>
            </div>
                : <div>
                    <a style={{ display: 'block' }}>通过验证</a>
                    <a style={{ display: 'block' }}>不通过验证</a>
                </div>
        }
    },
]

const dataSource = [
    {
        stu_id: 'stu_2021000',
        name: '张三',
        status: '考试中',
        time: '8:00:00 至 9:30:00',
        verifyImg: '',
        verified: true
    },
    {
        stu_id: 'stu_2021001',
        name: '李四',
        status: '考试中',
        time: '8:00:00 至 9:30:00',
        verifyImg: '',
        verified: false
    },
    {
        stu_id: 'stu_2021002',
        name: '王五',
        status: '已交卷',
        time: '8:00:00 至 9:30:00',
        verifyImg: '',
        verified: true
    },
    {
        stu_id: 'stu_2021003',
        name: '赵六',
        status: '未开始',
        time: '8:00:00 至 9:30:00',
        verifyImg: '',
        verified: false
    },
]
class Index extends Component {
    render() {
        return <div>
            <Table
                pagination={false}
                columns={columns}
                dataSource={dataSource.map((data) => {
                    return {
                        ...data,
                        key: data.stu_id
                    }
                })} />
        </div>
    }
}

export default Index